import React, { useRef } from "react";
import {Button, Space, Form, Input,Select} from 'antd';
import _ from 'lodash';
import TheButton from '@/components/TheButton';
import ThePagination from "@/components/ThePagination";
import TheTable from "@/components/TheTable";
import TheDialog from "@/components/TheDialog";
const SearchHeader = ({ openDialog, getValue }) => {
  const formRef = useRef()
  // 服务类型数据
  const options = [
    { value: 'J', label: '仅退款' },
    { value: 'H', label: '退货退款' },
    { value: 'Q', label: '取消退款' },
  ]
  // 查询完成
  const onFinish = (values) => {
    _.forIn(values, (v, k) => {
      if (!v) {
        delete (values[k])
      }
    })
    getValue(values)
  }
  // 搜索内容重置
  const reset = () => {
    formRef.current.setFieldsValue({
      id: '',
      goodsState: '',
      serverType:'',
    })
    getValue({})
  }
  return (
    <div
      className="p-search-box"
      style={{ display: "flex", justifyContent: "space-between" }}
    >
      <Form ref={formRef} onFinish={onFinish} layout="inline">
        <Form.Item name="serverType">
          <Select 
            placeholder={"请选择服务类型"} 
            style={{ width: 150 }}
            options={options}
          />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button htmlType="submit" type="primary">查询</Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
      <TheButton type="default" size="middle" onClick={openDialog}>
        新增理由
      </TheButton>
    </div>
  );
};
class List extends React.Component {
  state = {
    columns: [
      {
        title: "货物状态",
        dataIndex: "goodsState",
        key: "goodsState",
        render: (text, record) => {
          let label = ''
          switch (text) {
            case 'Y':
              label = '已收到货';
              break;
            case 'W':
              label = '未收到货';
              break;
            case 'T':
              label = '退货退款';
              break;
            case 'q':
              label = '取消退款';
              break;
          }
          return label;
        }
      },
      {
        title: "服务类型",
        dataIndex: "serverType",
        key: "serverType",
        render: (text, record) => {
          let label = ''
          switch (text) {
            case 'J':
              label = '仅退款';
              break;
            case 'H':
              label = '退货退款';
              break;
            case 'Q':
              label = '取消退款';
              break;
          }
          return label;
        }
      },
      {
        title: "操作",
        fixed: "right",
        render: (text, record) => {
          console.log(record);
          return (
            <>
              <TheButton haspermi={['mall:parameter:edit']} onClick={() => this.editDialog(record)}>编辑</TheButton>
              <TheButton haspermi={['mall:parameter:delete']}  onClick={() =>this.delConfirm(record)}>删除</TheButton>
            </>
          )
        }
      },
    ],
    dataSource: [
      {id: 1, serverType: 'J' , goodsState: 'Y'}
    ],
    loading: false,
    serverType: null,
    title: '',
    visible: false,
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    editValue: {},
    searchValue: {}
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {}
  getValue = (value) => {
    this.setState({ searchValue: value, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }
  // 修改售后原因
  editDialog = value => {
    this.setState({
      title: '修改订单售后原因',
      visible: true,
      type: 'edit',
      editValue: {...value}
    })
    console.log(value);
  }
  // 删除售后信息
  delConfirm = () => {
    React.$confirm({
      title: '您确认删除此条订单退款原因吗？',
      onOk: async () => {console.log('hhh');},
    })
  }
  // 新增理由
  openDialog = () => {
    this.setState({
      visible: true,
      title: '新增订单售后原因',
      type: 'add'
    })
  }
  // 关闭新增理由
  closeDialog = () => {
    this.setState({
      editValue: {},
      storeChauffeurId: '',
      visible: false,
      title: '',
      type: '',
      serverType: null
    })
  }
  // 保存新增/编辑理由
  handleOk = (value)=> {
    console.log(value);
    const {type} = this.state
    if (type === 'add') {
      React.$message({
        type: 'info',
        content: '新增成功'
      })
      console.log("新增");
    }else{
      React.$message({
        type: 'info',
        content: '修改成功'
      })
      console.log('修改');
    }
    this.closeDialog()
    this.getData()
  }
  // 改变服务类型value
  classifyChange = e => {
    console.log('服务类型:',e);
    this.setState({
      serverType: e,
      editValue: {}
    })
  }
  render() {
    const {
      columns,dataSource,pageData: { pageNo, pageSize },total,title, visible, editValue,loading,serverType,
    } = this.state;
    return (
      <div className={"p-layout-box commodity-content"}>
        <SearchHeader getValue={this.getValue} openDialog={this.openDialog} />
        <div className="p-layout-content-pagination">
          <TheTable
            scroll={{ x: "max-content", y: '63vh' }}
            columns={columns}
            dataSource={dataSource}
          />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
        <TheDialog
          width={400}
          title={title}
          visible={visible}
          footer={null}
          handleCancel={this.closeDialog}
        >
          <Form onFinish={this.handleOk} initialValues={editValue}>
            <Form.Item label="服务类型" name="serverType" rules={[{required: true}]}>
              <Select
                onChange={this.classifyChange}
                placeholder={"请选择服务类型"}
                options={[
                  { value: 'J', label: '仅退款' },
                  { value: 'H', label: '退货退款' },
                  { value: 'Q', label: '取消退款' },
                ]}
              />
            </Form.Item>
            {
              serverType === 'J' ||  editValue.serverType === 'J' ?
              <Form.Item label="货物状态" name="goodsState" rules={[{required: true}]}>
                <Select 
                  placeholder={"请选择货物状态"}
                  options={[
                    { value: 'W', label: '未收到货' },
                    { value: 'Y', label: '已收到货' },
                  ]}
                />
              </Form.Item> : null
            }
            <Form.Item>
              <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: -30 }}>
                <Space>
                  <Button onClick={this.closeDialog}>取消</Button>
                  <Button loading={loading} type='primary' htmlType='submit'>确定</Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </TheDialog>
      </div>
    );
  }
}
export default List